<template>
  <div class="self">
    <h1 class="child1">个人信息</h1>
    <div class="child2">
      <div class="lgoinImg">
        <img
          class="portrait"
          src="../../assets/img/portrait.jpg"
          height="152"
          width="135"
        />
      </div>
      <div class="xinxi">
        <h3>姓名：{{ patient.real_name }}</h3>
        <h3>手机号：{{ patient.telephone }}</h3>
        <h3>身份证号：{{ patient.patient_id }}</h3>
      </div>
      <div class="tc">
        <el-button type="success" @click="tuichu">退出当前用户</el-button>
      </div>
    </div>
  </div>

  <div class="doctor">
    <h1 class="child3">就诊信息</h1>
    <div class="child4">
      <div class="jz" v-for="props in from" :key="props">
        <el-card shadow="always">
          <div class="aa">
            <el-image :src="props.img" class="image" />
          </div>
          <div class="xx">
            {{ props.id }}
            <h4>就诊日期：{{ props.day }}</h4>
            <h4>上午：{{ props.amwork }}||下午：{{ props.pmwork }}</h4>
            <h4>就诊科室：{{ props.departmentName }}</h4>
            <h4>就诊医生：{{ props.docName }}</h4>
            <h4>就诊类型：{{ props.feeName }}</h4>
            <h4>价格：{{ props.money }}元</h4>
          </div>

          <div class="dz">
            <el-popconfirm title="确认要取消挂号吗?" @confirm="reset(props)">
              <template #reference>
                <el-button class="cancle" type="info" size="large"
                  >取消挂号</el-button
                >
              </template>
            </el-popconfirm>
            <el-button
              class="enter"
              type="primary"
              plain
              size="large"
              @click="jump">
              确认缴费
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <div class="gr"></div>



  <el-dialog v-model="dialogVisible" title="支付" width="30%">
    <h4>{{ patient.real_name }}的挂号订单</h4>
    <img src="../../assets/img/weixin.jpg" width="300" height="300" class="img">


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="pay" class="pay" >我已支付</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";
import { get } from "../../utils/request";

export default {
  data() {
    return {

      dialogVisible: false,//11111
      loginState: sessionStorage.login,
      patient: {
        patient_id: sessionStorage.patient_id,
        telephone: sessionStorage.telephone,
        real_name: sessionStorage.real_name,
      },
      from: [],
    };
  },
  mounted() {
    this.getPersonage();
  },
  methods: {

    jump(){
      this.dialogVisible =! this.dialogVisible
    },

    pay(){
      this.dialogVisible = !this.dialogVisible
    },

    getPersonage() {
      get("/getPersonage", {
        patientId: this.patient.patient_id,
      }).then((res) => {
        this.from = res.data;
        for (var i = 0; i < this.from.length; i++) {
          if (this.from[i].amwork == "0") this.from[i].amwork = "休息";
          if (this.from[i].pmwork == "0") this.from[i].pmwork = "休息";
        }
        console.log(this.from);
      });
    },
    tuichu() {
      sessionStorage.clear();
      console.log(sessionStorage);
      this.$router.push({
        name: "login",
      });
      ElMessage({
        message: "退出成功！",
        type: "success",
      });
    },
    reset(item) {
      get("/deletePatientDoctor", {
        id: item.id,
      }).then(() => {
        ElMessage({
          message: "取消成功！",
          type: "success",
        });
      });
      location.reload();
    },
  },
};
</script>

<style lang="scss" scoped>
html {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
.child1 {
  background-color: #259b9e;
  height: 35px;
  width: 170px;

  text-align: center;
  color: white;
}
.child2 {
  background-color: #c3d2d3;
  position: relative;
  border: 1px solid rgb(186, 184, 184);
  height: 400px;
  width: 600px;
  color: rgb(129, 122, 122);
  margin-top: -15px;
}
.child3 {
  background-color: #259b9e;
  height: 35px;
  width: 155px;
  text-align: center;
  color: white;
}
.child4 {
  height: 155px;
  width: 90%;
  float: left;
  color: white;
  margin-top: -15px;
}
.self {
  margin-left: 3%;
  margin-top: 55px;
  width: 600px;
}

.doctor {
  margin-left: 47%;
  margin-top: -470px;
  width: 800px;
}

.title1 {
  float: left;
  size: 25px;
}
.xinxi {
  color: rgb(83, 80, 80);
  margin-left: -21%;
  float: left;
  margin-top: 150px;
}
.jz {
  position: relative;
  margin-top: 5px;
}
.aa {
  margin-left: 5%;
  margin-top: 15px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.aa img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  height: 100%;
}
.xx {
  margin-left: 10%;
  width: 50%;
  float: left;
}
.tc {
  position: absolute;
  left: 75%;
  bottom: 15%;
}
.dz {
  position: absolute;
  left: 75%;
  bottom: 10%;
}
.portrait {
  margin-left: 3%;
  float: left;
  margin-top: 8px;
}
.cancle {
  position: absolute;
  left: 22px;
  bottom: 15%;
  top: -60px;
}
.enter {
  position: absolute;
  left: 10px;
  bottom: 15%;
  top: -15px;
  pointer-events: all;

 
}
.img{
  position: relative;
  top: 50%;
  left: 15%;
}
</style>
